<script setup>
import { computed, onMounted, ref, onUnmounted } from 'vue';
import jump from './components/jump.vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/user'
import { getHistoryListApi } from '@/apis/history'
import { getSignInApi, SignInApi } from '@/apis/signIn'
import { ElMessage } from 'element-plus';
import { getInputPostListApi } from '@/apis/post'


//路由跳转

const router = useRouter()

const userStore = useUserStore()

const info = userStore.userInfo;


const showHistory = ref(false);

//图片地址
// const url = info.avatar || 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif';
const url = 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif';

// 底层弹出框控制
const drawer2 = ref(false);

//个人信息弹出框控制
const userInfo = ref(false);


// #region  自定补全框


const input = ref('')


/* 点击输入框时获得数据 */
const querySearch = async (queryString, cb) => {
  const results = await getInputPostListApi(queryString)

  cb(results.data)
}


const handleInputChange = () => {
  if (input.value == "") {
    return
  }
  router.push("/select/" + input.value)

}



// #endregion


// #region  历史跳转代码
const handleHistorySelect = (id) => {
  router.push('/postDetail/' + id)
}

// #endregion


// #region 历史弹出框数据


const activeIndex = ref('1')

// 切换历史日期
const handleSelect = async (index) => {
  activeIndex.value = index

  await getHistoryList(index)
}

// #endregion


// #region 获得历史记录列表方法和数据

const historyList = ref([])
const getHistoryList = async (time) => {
  const res = await getHistoryListApi(userStore.userInfo.id, time)
  historyList.value = res.records
}
// #endregion


// #region 签到相关代码
const sign = ref(false)

/* 获取签到信息 */
const getSignIn = async () => {
  const res = await getSignInApi(userStore.userInfo.id)
  sign.value = res.data
}

/* 签到 */
const signIn = async () => {

  const res = await SignInApi(userStore.userInfo.id)

  ElMessage.success(res.data)

  /* 再次获得签到状态 */
  await getSignIn(userStore.userInfo.id)

  /* 获得经验值 */
  await userStore.getExperience()
}


// #endregion


// #region 经验表的控制，计算属性
const experience = computed(() => {
  return userStore.experience / userStore.userInfo.needExperienceValue * 100
})
// #endregion


let timer = null;

onUnmounted(() => {
  //主动清除定时器
  clearInterval(timer)

});



onMounted(async () => {

  /* 获得用户信息 */
  await userStore.getUserInfo()

  // 获得历史记录
  await getHistoryList(1)

  /* 获得用户经验 */
  await userStore.getExperience()

  /* 获得用户未读信息 */
  await userStore.getUnreadMessage()

  /* 每隔五分钟发送一次请求,获取用户未读信息 */
  timer = setInterval(async () => {
    /* 获得用户未读信息 */
    await userStore.getUnreadMessage()

  }, 1000 * 60 * 5)

  /* 获得用户签到信息 */
  await getSignIn()

})



// #region 计算属性查看当前设备的手机端还是电脑端
const isMobile = computed(() => {
  return window.innerWidth <= 768
})

// #endregion

</script>

<template>
  <div class="top">

    <div class="container">
      <router-link to="/" class="logo">
        <!-- <img src="@/assets/images/logo.jpg" alt="logo" width="30"> -->
        <div>logo</div>
      </router-link>

      <!-- 经验 -->
      <div class="experience">
        <div class="avatar" @mouseover="userInfo = true" @mouseleave="userInfo = false">
          <!-- 头像 -->
          <router-link :to="`/user/${userStore.userInfo.id}`">
            <el-avatar :class="{ 'active': userInfo }" class="avatar-img" shape="circle" :size="30" :fit="fit"
              :src="userStore.userInfo.avatar" />
          </router-link>

          <!-- transition的动画效果 用户信息弹出框 -->
          <transition name="fade">
            <div class="user-info hidden-sm-and-down" v-if="userInfo">
              <p class="name">{{ userStore.userInfo.username || '起个名字吧!' }}</p>
              <div class="associated">
                <router-link to="/message/fans">
                  <div class="fans">
                    <h4>{{ userStore.userInfo.numberOfFans }}</h4>
                    <span>粉丝</span>
                  </div>
                </router-link>
                <router-link to="/message/attention">
                  <div class="focus">
                    <h4>{{ userStore.userInfo.numberOfAttention }}</h4>
                    <span>关注</span>
                  </div>
                </router-link>
                <router-link to="/message/good">
                  <div class="praise">
                    <h4>{{ userStore.userInfo.numberOfGood }}</h4>
                    <span>获赞</span>
                  </div>
                </router-link>
              </div>
              <!-- 点击跳转区 -->
              <jump :route="`/user/${userStore.userInfo.id}`" text="个人中心" icon="yonghu" />
              <jump @click="userStore.logout()" route="/login" text="退出" icon="tuichu" />


            </div>
          </transition>
        </div>

        <!-- 提示文字 -->
        <el-tooltip class="box-item hidden-md-and-down" effect="dark"
          :content="`${userStore.experience} / ${userStore.userInfo.needExperienceValue}`" placement="bottom">
          <!-- 经验进度条 -->
          <el-progress class="progress-bar hidden-md-and-down " color="rgb(184,214,255)" :show-text="false" text-inside
            :stroke-width="15" :percentage="experience"></el-progress>
        </el-tooltip>


        <!-- 需要点击然后出现一个弹窗来提示经验如何获得 -->
        <!-- 称号 -->
        <div class="level hidden-md-and-down" @click="drawer2 = true">
          <span>{{ userStore.userInfo.chenghao }}</span>
          <svg-icon :name="userStore.userInfo.icon" color="blue" />
        </div>

        <!-- 签到按钮.签到后就改颜色 -->
        <el-button :disabled="sign" @click="signIn" type="primary hidden-md-and-down">{{ sign ? '已签到' : '签到'
          }}</el-button>
      </div>

      <!-- 搜索框 -->
      <div class="input">
        <div>
          <el-autocomplete v-model="input" :fetch-suggestions="querySearch" placeholder="帖子" :debounce="10"
            @change="handleInputChange" @keyup.enter="handleInputChange">
            <template #default="{ item }">
              <!-- 这个有个最小值的，最小值是不能小于你的搜索框宽度，不能比他短了 -->
              <!-- 这是设置的是里面一个一个的搜索项的宽度，不是整个回显框的宽度 -->
              <div v-if="isMobile" style="width: 160px; overflow: hidden; text-overflow: ellipsis; ">{{
                item.value }}
              </div>
              <div v-else style="width: 410px; overflow: hidden; text-overflow: ellipsis;">{{
                item.value }}
              </div>
            </template>
          </el-autocomplete>
        </div>
      </div>

      <el-button type="primary" icon="Search" class="hidden-sm-and-down" style="margin-right: 30px;"
        @click="handleInputChange">搜索</el-button>




      <!-- 历史文字以及弹出框 -->
      <div @mouseover="showHistory = true" @mouseleave="showHistory = false" class="history">
        <router-link to="/history">历史</router-link>
        <!-- 历史弹出框 -->
        <div class="history-dialog hidden-sm-and-down" v-if="showHistory">

          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">今日</el-menu-item>
            <el-menu-item index="2">近7日</el-menu-item>
          </el-menu>

          <!-- 历史列表 -->
          <ul class="content">
            <el-scrollbar height="400px">
              <li @click="handleHistorySelect(item.postId)" v-for="item in historyList" :key="item.id">
                <el-row>
                  <el-col :span="6">
                    <img v-if="item.picture" :src="item.picture" class="image" alt="暂无图片">
                    <img v-else src="@/assets/images/zwtp.webp" class="image" alt="暂无图片">
                  </el-col>
                  <el-col :span="18">
                    <span>{{ item.postTitle }}</span>
                    <p>{{ item.browseTime }}</p>
                  </el-col>
                </el-row>
              </li>
            </el-scrollbar>
          </ul>


        </div>
      </div>

      <el-badge :value="userStore.unreadMessage.totalCount" :offset="[-10, 0]" class=" message"
        :hidden="userStore.unreadMessage.totalCount === 0">
        <router-link to="/message">消息</router-link>
      </el-badge>

      <router-link to="/publish">
        <el-button type="danger" icon="upload" class="need-margin-left hidden-sm-and-down">发布</el-button>
      </router-link>
    </div>



    <!-- 经验介绍 -->
    <el-drawer class="experience-dialog" size="70%" :show-close="false" v-model="drawer2" direction="btt">
      <template #header style="margin-bottom: 0;">
        <h4>经验介绍</h4>
      </template>
      <template #default>
        <div class="experience-content">
          <h4>经验说明：</h4>
          <p>每日签到可获得5经验</p>
          <!-- <h4>回帖说明：</h4> -->
          <p>每日首次评论可获得5经验。第2-5次可获得3经验，评论超过5次今日将不再获得经验。</p>
          <!-- <h4>发帖说明：</h4> -->
          <p>每日首次发帖可获得10经验。第1-3次可获得5经验，发帖超过3次今日将不再获得经验。</p>
          <p>每日00:00刷新</p>

          <h4>等级说明：</h4>
          <p>本贴吧最高五级。每级的所需的经验值是不同的，可点击经验值进度条查看。</p>

          <h4>特权说明：</h4>
          <p>每个级别都会获得不同的称号与图标</p>

        </div>
      </template>
    </el-drawer>


  </div>






</template>

<style lang='scss' scoped>
// 全局使用
.need-margin-left {
  margin-left: 30px;
}

.need-margin-right {
  margin-right: 30px;
}

// 底层经验介绍弹出框
.experience-content {
  color: blue;
  font-size: 18px;

  &>h4 {
    margin-bottom: 5px;
    font-size: 21px;
    color: rgb(255, 115, 0);
  }

  &>h4:not(:first-child) {
    margin-top: 30px;
  }

  >p {
    margin-bottom: px;
  }
}

.history {
  position: relative;

  // 历史弹出框
  .history-dialog {
    width: 400px;
    height: 500px;
    border: 1px solid rgb(190, 189, 189);
    position: absolute;
    top: 50px;
    right: -180px;
    z-index: 9999;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    // padding: 20px;

    .content {
      margin-top: 10px;

      .image {
        height: 80px;
        width: 90px;
      }

      & li {
        font-size: 1.4rem;
        margin-top: 15px;
        // white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-bottom: 1px solid rgb(216, 216, 216);
        // height: 80px;

        & p {

          color: $no-highlight-color;
          font-size: 14px;
          position: absolute;
          bottom: 0;
          right: 0;

        }

        &:hover {
          background-color: rgba(176, 177, 177, 0.14);
          cursor: pointer;
        }
      }
    }
  }
}





// 顶部导航栏
// pc大屏幕
@media screen and (min-width: 1200px) {

  .top {
    font-size: 1.6rem;
    background-color: rgb(240, 246, 243);
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    margin-bottom: 200px;

    .container {
      width: $base-container-width;
      height: inherit;
      margin: 0 auto;
      display: flex;
      align-items: center;

      .experience {
        display: flex;
        align-items: center;
        height: 20px;

        .box-item {
          z-index: 9999;
        }

        .progress-bar {
          width: 160px;
          margin-left: 10px;
        }


        .level {
          border: 1px solid rgb(126, 127, 128);
          height: 30px;
          width: 100px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          margin: 0 10px;
          color: rgb(255, 106, 0);

          &:hover {
            cursor: pointer;
          }
        }


      }

      .input {
        flex: 0.9;
        margin-left: 10px;

      }




      .message {
        cursor: pointer;
        margin-left: 30px;
        margin-right: 10px;
      }

      .history {
        padding: 15px 0;
      }
    }

    .avatar {
      // border: 1px solid red;
      padding: 5px 0;
      margin-left: 20px;
      transition: opacity 0.5s cubic-bezier(0.6, 0.04, 0.98, 0.335),
        transform 0.5s cubic-bezier(0.6, 0.04, 0.98, 0.335); // 添加过渡效果
      position: relative;

      // 头像动画效果
      .active {
        transform: scale(1.8); // 添加向下移动的效果

      }


      //用户信息弹出框
      .user-info {
        width: 200px;
        height: 400px;
        position: absolute;
        top: 49px;
        left: -85px;
        border: 1px solid rgb(190, 189, 189);
        background-color: white;
        z-index: 999;

        &>.name {
          border-bottom: 1px solid rgb(190, 189, 189);
          text-align: center;
          padding: 10px 0;
          font-size: 18px;
          color: red;
        }

        .associated {
          display: flex;
          justify-content: space-around;
          padding: 10px 0;
          border-bottom: 1px solid $no-highlight-color;
          margin-bottom: 20px;

          // 选中当下类下所有的h4标签颜色变成红色
          h4 {
            font-size: 14px;
            font-weight: bold;
          }

          span {
            color: $no-highlight-color;
          }

          .fans,
          .focus,
          .praise {
            text-align: center;
          }
        }



      }
    }

    .fade {

      &-enter-active,
      &-leave-active {
        transition: opacity 0.5s cubic-bezier(0.6, 0.04, 0.98, 0.335),
          transform 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.335);
      }

      &-enter {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
        /* 初始状态：缩小并向上位移 */
      }

      &-enter-to {
        opacity: 1;
        transform: scale(1) translateY(0);
        /* 结束状态：正常大小，恢复原位 */
      }

      &-leave,
      &-leave-to {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
        /* 离开时的状态：缩小并向上位移 */
      }
    }

  }



}


// 768至1200px之间
@media screen and (min-width: 769px) and (max-width: 1199px) {

  .top {
    font-size: 1.6rem;
    background-color: rgb(240, 246, 243);
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    margin-bottom: 200px;

    .container {
      width: $base-container-width;
      height: inherit;
      margin: 0 auto;
      display: flex;
      align-items: center;



      .input {
        width: 60vw;
        margin-left: 10px;
      }


      .message {
        cursor: pointer;
        margin-left: 10px;
      }

      .history {
        // border: 1px solid red;
        padding: 50px 0;
      }
    }

    .avatar {

      margin-left: 20px;

      //开启相对定位,让用户弹出框始终位于自己下面
      position: relative;

      // 头像动画效果
      .active {
        transform: scale(1.2); // 添加向下移动的效果
      }


      //用户信息弹出框
      .user-info {
        width: 200px;
        height: 400px;
        position: absolute;
        top: 30px;
        left: 0px;
        border: 1px solid rgb(190, 189, 189);
        background-color: white;
        z-index: 999;

        &>.name {
          border-bottom: 1px solid rgb(190, 189, 189);
          text-align: center;
          padding: 10px 0;
          font-size: 18px;
          color: red;
        }

        .associated {
          display: flex;
          justify-content: space-around;
          padding: 10px 0;
          border-bottom: 1px solid $no-highlight-color;
          margin-bottom: 20px;

          // 选中当下类下所有的h4标签颜色变成红色
          h4 {
            font-size: 14px;
            font-weight: bold;
          }

          span {
            color: $no-highlight-color;
          }

          .fans,
          .focus,
          .praise {
            text-align: center;
          }
        }



      }
    }

    .fade {

      &-enter-active,
      &-leave-active {
        transition: opacity 0.5s cubic-bezier(0.6, 0.04, 0.98, 0.335),
          transform 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.335);
      }

      &-enter {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
        /* 初始状态：缩小并向上位移 */
      }

      &-enter-to {
        opacity: 1;
        transform: scale(1) translateY(0);
        /* 结束状态：正常大小，恢复原位 */
      }

      &-leave,
      &-leave-to {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
        /* 离开时的状态：缩小并向上位移 */
      }
    }

  }

}


//  768以下的小屏幕
@media screen and (max-width: 768px) {

  .top {
    font-size: 1.6rem;
    background-color: rgb(240, 246, 243);
    width: 100vw;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    margin-bottom: 200px;

    .container {
      width: 100vw;
      height: inherit;
      margin: 0 auto;
      display: flex;
      align-items: center;

      .logo {
        width: 9vw;
      }



      .input {
        width: 54vw;
        margin-left: 10px;
      }


      .message {
        cursor: pointer;
        margin-left: 7px;
      }

    }

    .avatar {
      margin-left: 10px;

    }

    .fade {

      &-enter-active,
      &-leave-active {
        transition: opacity 0.5s cubic-bezier(0.6, 0.04, 0.98, 0.335),
          transform 0.1s cubic-bezier(0.6, 0.04, 0.98, 0.335);
      }

      &-enter {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
        /* 初始状态：缩小并向上位移 */
      }

      &-enter-to {
        opacity: 1;
        transform: scale(1) translateY(0);
        /* 结束状态：正常大小，恢复原位 */
      }

      &-leave,
      &-leave-to {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
        /* 离开时的状态：缩小并向上位移 */
      }
    }

  }

  .history {
    // border: 1px solid red;
    margin-left: 10px;
  }

}
</style>